<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D变换</title>
</head>
<style>
    /* 2D==================--------------------================================ */
    .main-demo {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
    }

    .main-demo .outer {
        width: 200px;
        height: 200px;
        border: 1px solid rgb(198, 196, 196);
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: bisque;
    }

    .translate {
        transform: translateX(20px);
        transform: translateY(40px);
        /* 只有一个值相当于 translateX(20px) */
        transform: translate(20px);
        transform: translate(20px, 40px);
    }

    .scale {
        transform: scaleX(0.8);
        transform: scaleY(0.9);
        /* 只有一个值相当于 scale(0.8,0.8)，和位移不同 */
        transform: scale(0.8);
        transform: scale(0.8, 0.9);
    }

    .rotate {
        transform: rotateZ(30deg);
        /* 只有一个值相当于2D的 rotateZ(30deg) */
        transform: rotate(30deg);
    }

    .skew {
        transform: skewX(30deg);
        transform: skewY(60deg);
        /* 只有一个值相当于skewX(30deg) */
        transform: skew(30deg);
        /* transform: skew(30deg, 60deg); */
    }

    .more {
        transform: translate(20px, 20px) rotate(30deg);
    }

    .origin {
        transform-origin: right bottom;
        transform-origin: 50px 50px;
        transform-origin: 25% 25%;
        /* 只有一个像素值或者百分比相当于定了X为25%，但是Y不知道就默认50% */
        transform-origin: 25%;
        /* 只有一个单词值，这个方向知道，另一个方向为center */
        transform-origin: top;

        transform-origin: 200px 200px;
        transform: translate(30px);
    }

    /* 3D-------------================================================================= */
    .main-demo .threed-outer {
        width: 200px;
        height: 200px;
        border: 1px solid rgb(198, 196, 196);

        /* 这都是给3d空间的父元素上 */
        /* 开启3d */
        transform-style: preserve-3d;
        /* 设置景深【近大远小透视效果】 */
        perspective: 500px;
        /* 设置透视点位置：默认在元素中心 */
        /* perspective-origin: 200px 200px; */
    }

    .threed-inner {
        width: 100px;
        height: 100px;
        background-color: darkseagreen;
    }

    .threed-translate {
        transform: translateZ(50px);
        /* 必须写三个值，不能省略，而且Z轴的值不能写百分比 */
        transform: translate3d(0, 0, 50px);
    }

    .threed-rotate {
        transform: rotateX(45deg);
        transform: rotateY(45deg);
        /* 集合写法0是不变，1是旋转，度数30deg */
        transform: rotate3d(1, 0, 0, 30deg);
    }

    .threed-scale {
        /* 缩放相当于厚度，但div没厚度，所以相当于盖了景深，元素冲你来了 */
        transform: scaleZ(2);
        transform: scale3d(1, 1, 2);
    }
</style>

<body>
    <div class="main-demo">
        <!-- 位移：像素值或者百分比，百分比对应的是元素自身的百分比
         位移和相对定位都不脱离文档流 -->
        <div class="outer">
            <div class="inner translate">位移</div>
        </div>
        <!-- 缩放：可以借助缩放实现小于12px的字体 -->
        <div class="outer">
            <div class="inner scale">缩放</div>
        </div>
        <!-- 旋转：rotateZ才是2D的，正数顺时针，负数逆时针 -->
        <div class="outer">
            <div class="inner rotate">旋转</div>
        </div>
        <!-- 扭曲：类似在扭菱形 -->
        <div class="outer">
            <div class="inner skew">扭曲</div>
        </div>
        <!-- 多重变换：最好是把rotate旋转放在最后，因为旋转会改变坐标系 -->
        <div class="outer">
            <div class="inner more">多重变换</div>
        </div>
        <!-- 变换原点:会影响旋转rotate和scale缩放，不影响位移translate -->
        <div class="outer">
            <div class="inner origin">变换原点</div>
        </div>
    </div>

    <div class="main-demo">
        <div class="threed-outer">
            <div class="threed-inner threed-translate">3d位移</div>
        </div>
        <div class="threed-outer">
            <div class="threed-inner threed-rotate">3d旋转</div>
        </div>
        <div class="threed-outer">
            <div class="threed-inner threed-scale">3d缩放</div>
        </div>
    </div>
</body>

</html>